Nếu ta muốn làm một đồng hồ bấm gờ, khi bấm chạt thì bắt đầu đếm, khi bấm ngưng thì ngừng lại thì làm thế nào nhỉ. Dĩ nhiên là cần tới setTimeout và clearTimeout vì đang nằm trong loạt bài về chúng mà.
Cụ thể thì làm thế nào nhỉ, đồng hồ bấn giờ cứ mỗi giây tăng lên 1, vậy thì có nghĩ là phải gọi một hàm setTimeout thực hiện một hàm tăng lên 1, sau đó là phải làm sau cho hàm setTimeout chạy liên tục cứ sau mỗi 1 giây.Trong đầu bạn chắc hẵn sẽ hiện ra ý tưởng về một vòng lặp, đó cũng là nhưng gì mình nghĩ tới đầu tiên.
Đáng buồn thay:
Mã nguồn:[Chọn]
<script type="text/javascript">
function thongbao()
{
alert("Thêm 3 giây nữa đả trôi qua");
}
i=0;
while(i<10)
{
setTimeout("thongbao();",3000);
i=i+1;
}
</script>
Mình viết đoạn code này với suy nghĩ, cứ mỗi lần các c\vòng lặp chạy, nó sẽ gọi hàm setTimeout, đợi 3 giây rồi chạy tiếp. Mọi thứ tan vỡ khi mình chạy thử, sau khi đợi 3 giây thì cả 10 hộp cảnh báo hiện ra, câu trả lời là vì:
Vòng lặp chỉ gọi hàm setTimeout chứ không đợi nó, đối với tốc dộ kinh hồn của vòng lặp, 10 lần sẽ trôi qua ngay như cùng một lúc, và bạn chỉ vừa tắt hộp cảnh báo thứ nhất thì 9 hộp kia đã xuất hiện. Không thể nào giảm tốc độ của một vòng lặp được!
Vậy hãy thử nhìn vào hướng khác, nhìn rộng và xa ra, châu Mỷ chẵn hạn :)) OAo, một hàm tự gọi lại chính nó trong một khoảng thời gian. Đó là cách giải quyết:
Mã nguồn:[Chọn]
function thongbao()
{
alert("Thêm 3 giây nữa đả trôi qua");
setTimeout("thongbao();",3000);
}
Lần đầu tiên thì hơi bị trục trặc, xuất hiện ngay bảng thông báo nếu bạn chạy hàm, nhưng nhữnglần su thì trơn tru, đúng kết hoạch.
Ta có thể sửa lỗi này bằng cách dùng một lần hàm setTimeout bên ngoài hàm, ngoài hàm này, sau lần đầu tiên hàm setTimeour đó sẽ ngưng hoạt động, và hàm bắt đầu gọi hàm setTimeout của riêng nó.và đây là đồng hồ bấm giờ của chúng ta:
Mã nguồn:[Chọn]
<script type="text/javascript">
function baogio()
{
num=document.the_form.kq.value;
num=eval(num)+1;
document.the_form.kq.value=num;
hengio=setTimeout("baogio();",1000);
}
</script>
<form name="the_form">
<input type="text" name="kq" value="0" />
<br />
<input type="button" value="Bắt đầu" onclick="baogio();" />
<input type="button" value="Dừng" onclick="clearTimeout(hengio);" />
</form>
Hãy thử chạy code nhé